<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script src="../../js/highcharts.js"></script>
		<script src="../../js/modules/exporting.js"></script>
				<script>
		jQuery.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
						    // check that we have a column id
						    if ( typeof iColumn == "undefined" ) return [];

						    // by default we only wany unique data
						    if ( typeof bUnique == "undefined" ) bUnique = true;

						    // by default we do want to only look at filtered data
						    if ( typeof bFiltered == "undefined" ) bFiltered = true;

						    // by default we do not wany to include empty values
						    if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

						    // list of rows which we're going to loop through
						    var aiRows;

						    // use only filtered rows
						    if (bFiltered == true) aiRows = oSettings.aiDisplay;
						    // use all rows
						    else aiRows = oSettings.aiDisplayMaster; // all row numbers

						    // set up data array
						    var asResultData = new Array();

						    for (var i=0,c=aiRows.length; i<c; i++) {
						        iRow = aiRows[i];
						        var sValue = this.fnGetData(iRow, iColumn);

						        // ignore empty values?
						        if (bIgnoreEmpty == true && sValue.length == 0) continue;

						        // ignore unique values?
						        else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

						        // else push the value onto the result data array
						        else asResultData.push(sValue);
						    }

						    return asResultData;
		};

					/* Data set - can contain whatever information you want */


									var crazy;

								    ChartColnames = ["Name",'Apples', 'Oranges',
								                   'Pears', 'Grapes', 'Bananas'];

								    Data=[["Tom",5,3,10,7,2],["Bill",2, 2, 3,
								      2, 1],["Ted",3, 4, 4, 2, 5]];



								  ChartIndex =[1,2,3,5];
								  NameIndex = [0];

								  ChartIndex2 =[0,1,2,3,4];

								  var FullRow1=new Array(Data.length);
								  var names1 = new Array(Data.length);
								  var Tom1 = new Array(Data.length);
								  var ChartCategories1 = new Array(ChartIndex2.length);




								  for (i=0;i<Data.length;i++)
								  {
								    FullRow1[i] =new Array(ChartIndex2.length)
								    names1[i] = Data[i][NameIndex];
								    for(k=0;k<ChartIndex2.length;k++)
								    {
								      FullRow1[i][k] = Data[i][ChartIndex2[k]] ;
								      ChartCategories1[k] = {"sTitle":ChartColnames[ChartIndex2[k]]}
								    }
								    Tom1[i] = FullRow1[i]
								         ;
								  }
								  dataTable = {"aaData":Tom1,"aoColumns":ChartCategories1}
								  console.log(dataTable)

									var tChartCategories1 = new Array(Data.length);
									var tFullRow = new Array(ChartIndex.length)
									var tnames = new Array(ChartIndex.length);
									var tTom = new Array(ChartIndex.length);
									tNameIndex = [0];
									for(i=0;i < ChartIndex.length;i++)
									{
										tFullRow[i] = new Array(Data.length);
										tnames[i] = ChartColnames[ChartIndex[i]];
										for (k=0;k<Data.length;k++)
										{
											tChartCategories1[k] = Data[k][NameIndex]
											tFullRow[i][k] = Data[k][ChartIndex[i]]
										}
										tTom[i] = {"name":tnames[i],
										"data":tFullRow[i]
									}
									}

var Trial = '#container2'
var Trial2 = '#dynamic'
$(document).ready(function() {
			$(Trial2).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
			crazy = $('#example').dataTable( {
				"aaData": dataTable["aaData"],
				"aoColumns": dataTable["aoColumns"],
				"fnDrawCallback": function () {

						console.log("Hello");

					}

			} );

			$(Trial).highcharts({
				chart: {
					type: 'bar'
				},
				title: {
					text: 'Stacked bar chart'
				},
				xAxis: {
					categories: tChartCategories1
				},
				yAxis: {
					min: 0,
					title: {
						text: 'Total fruit consumption'
					}
				},
				legend: {
					backgroundColor: '#FFFFFF',
					reversed: true
				},
				plotOptions: {
					series: {
						stacking: 'normal'
					}
				},
					series: tTom
			});



});

			function myFunction()
			{
				alert(crazy.fnGetColumnData(1));
			}

								</script>

	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				DataTables dynamic creation example
			</div>

			<h1>Preamble</h1>
			<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.</p>

			<h1>Live example</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>

			<button onclick="myFunction()">Try it</button>


			  </body>
<